<template>
  <div class="warp_box">
    <div class="bar_box"><Bar/></div>
    <div class="content_box">
    <el-page-header @back="goBack" content="勘误" class="goback"></el-page-header>
    <div class="top_box2">
      <div class="input_box">
          单词英文： <el-input v-model="wordDetail.english" placeholder="请输入英文单词"></el-input>
      </div>
      <div class="input_box">
     中文释义：  <el-input v-model="wordDetail.chinese" placeholder="请输入要修改的中文释义"></el-input>
      </div>
     <div class="input_box">
     单词例句： <el-input v-model="wordDetail.example" placeholder="例句"></el-input>
     </div>
     <div class="input_box">
       单词词性:    <el-input v-model="wordDetail.property" placeholder="请输入词性"></el-input>
     </div>
      <div class="input_box">
       <el-button type="primary" @click="modify()">确认修改</el-button>
     </div>
 
    </div>
  </div>
      <div class="buttom"><ButtomBox/></div>
  </div>
</template>

<script>
import {searchData,modifyWord} from '@/api/api'
import ButtomBox from '../components/ButtomBox.vue'
import Bar from '../components/Bar.vue'
export default {
  name: 'modifyWord',
  components:{
    ButtomBox,Bar
  },
  data(){
    return{
      wordId:'',
      wordDetail:[]
    }
  },
  created(){
      if( this.$route.params.wordId){
      this.wordId = this.$route.params.wordId
    }
    else{
      this.wordId = localStorage.getItem('wordId')
    }
    const data = {
      id:this.wordId
    }
    
    searchData(data).then((response) => {
      console.log('wordDetail',response)
  this.wordDetail = response.data
      })
  },
  methods:{
    goBack(){
      console.log('11')
      this.$router.push(
        {
          name:'Manager',
           params:{
              activeName:'third'
            }
        }
      )
    },
    modify(){
      const data = {
        "english": this.wordDetail.english,
        "chinese": this.wordDetail.chinese,
        "property":this.wordDetail.property,
        "example":this.wordDetail.example
     }
    const id = this.wordDetail.wordId 
     modifyWord(data,id).then((response) => {
      console.log('modify',response)
         const data2= {
      id:this.wordId
    }
      
      searchData(data2).then((response) => {
        console.log('wordDetail',response)
    this.wordDetail = response.data
        })
      })
    }
 
  }
}
</script>

<style>
.input_box{
  padding-top: 1vw;
  padding-bottom: 1vw;
  text-align: center;
}
.modify_box{
  margin-top: 7vh;
}
.el-textarea{
  width: 80vw!important;
}
.article_img{
  width: 5vw;
  height: 5vw;
  margin-left: 5vw;
}
.top_box2{
  background-color: #fff;
  width: 100%;
}
.content_box {
    height: 80vh;
    width: 80vw;
    padding-left: 10vw;
    padding-right: 10vw;
    background-color: #EFEFEF;
}
.goback{
   margin-top: 1vh;
  background-color: #fff;
  margin-bottom: 1vh;
  height: 5vh;
  align-items: center;
}
</style>